<template>
    <div class="rightTwo">
        <ThemeTitle :title="title"/>
        <div class="flightList">
            <div class="tabs">
                <div class="tab" v-for="(item,index) of tabsList" 
                    @click="tabClick(index)"
                    :class="{'active':index==currIndex}"
                    :key="index">
                    <span>{{item.name}}</span>
                    <span>{{item.val}}</span>
                </div>
            </div>
            <div class="flightHead">
                <div class="flightHeadList" v-for="(item,index) in thead" :key="index">
                    {{item}}
                </div>
            </div>
            <div class="flightBody">
                <div class="flightBodyList" v-for="(item,index) in tbody" :key="index">
                    <div>{{item.icon}}</div>
                    <div>{{item.id}}</div>
                    <div>{{item.chufa}}</div>
                    <div>{{item.mudi}}</div>
                    <div>{{item.time}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle"
import {
  defineComponent,
  getCurrentInstance,
  onMounted,
  ref,
  provide
} from 'vue'
import { useRouter } from 'vue-router'
export default {
    components: {
        ThemeTitle
    },
   
    setup(){
        const title = provide("title","进出港航班");
        const thead = [
            "","航班号","出发地","目的地","到达时间"
        ]
        const currIndex = ref(0);
        const tbody = [
            {icon:'', id:'HU7362', chufa:'北京' ,mudi:'海口' ,time: '11:30:20'},
            {icon:'', id:'HU7363', chufa:'上海' ,mudi:'三亚' ,time: '11:30:22'},
            {icon:'', id:'HU7364', chufa:'北京' ,mudi:'海口' ,time: '11:30:24'},
            {icon:'', id:'HU7365', chufa:'上海' ,mudi:'三亚' ,time: '11:30:26'},
            {icon:'', id:'HU7366', chufa:'北京' ,mudi:'三沙' ,time: '11:30:28'},
            {icon:'', id:'HU7367', chufa:'上海' ,mudi:'博鳌' ,time: '11:30:30'},
            {icon:'', id:'HU7368', chufa:'北京' ,mudi:'博鳌' ,time: '11:30:31'},
            {icon:'', id:'HU7369', chufa:'上海' ,mudi:'三沙' ,time: '11:30:32'},
            {icon:'', id:'HU7370', chufa:'北京' ,mudi:'海口' ,time: '11:30:34'},
            {icon:'', id:'HU7371', chufa:'上海' ,mudi:'三亚' ,time: '11:30:36'},
            {icon:'', id:'HU7372', chufa:'北京' ,mudi:'博鳌' ,time: '11:30:38'}
        ]
        const tabsList = [
            {name:'进港航班',val:'320'},
            {name:'出港航班',val:'320'}
        ]
        function tabClick(index){
                currIndex.value = index
        }   
        onMounted(()=>{
            
        })
        return {
            thead,
            tbody,
            title,
            tabsList,
            currIndex,
            tabClick
        }
    }
}
</script>

<style lang="stylus" scoped>
    @import '../../../assets/varibles.styl'
    .rightTwo
        .flightList
            margin-top: vh(10)
            margin-bottom: vh(20)
            height:vh(168)
            overflow: hidden
            .tabs
                display:flex
                justify-content:space-around
                margin-bottom: vh(16)
                width:100%
                cursor: pointer
                .tab
                    flex:1
                    background: #023850
                    border: 1px solid #07384D
                    display:flex
                    justify-content:space-around
                    line-height:vh(27)
                    padding-left:vw(40)
                    padding-right:vw(40)
                .active
                    background: #03587e
                    border: 1px solid #1398cf
            .flightHead
                width:vw(363)
                height:vh(30)
                line-height: vh(28)
                display:flex
                justify-content :space-between
                .flightHeadList
                    flex-shrink:0 
                    flex:3
                    text-align: center
                    color:#37DCFF
                    font-weight: 700
                div:nth-child(1)
                    flex-shrink:0
                    flex:2
                    border-bottom:1px solid #213034
                    text-align: center
                    font-weight: 400;
            .flightBody   
                .flightBodyList
                    display: flex
                    justify-content: space-between
                    width: vw(363)
                    height: vh(28)
                    line-height: vh(28)
                    div
                        flex-shrink:0
                        flex:3
                        border-top:1px solid #213034
                        text-align: center
                        font-weight: 400
                    div:nth-child(1)
                        flex-shrink:0
                        flex:2
                        border-top:1px solid #213034
                        text-align: center
                        font-weight: 400;
        
</style>